<!-- 跑马灯 -->
<template>
	<view style="overflow: hidden;">
		<view id="marquee" class="marquee-container">
			<template v-if="props.marqueeKey">
				<template v-if="props.marqueeType === 'text'">
					<view class="marquee-item" v-for="item in marqueeList" :key="item[props.marqueeKey]">
						<text>{{ item[props.marqueeKey] }}</text>	
					</view>
				</template>
				<template v-else>
					<view class="marquee-item" v-for="item in marqueeList" :key="item[props.marqueeKey]">
						<image v-if="item[props.marqueeKey]" :src="item[props.marqueeKey]"></image>
						<image v-else src="@/static/new/user/default-head.png"></image>
					</view>
				</template>
			</template>
			<template v-else>
				<template v-if="props.marqueeType === 'text'">
					<view class="marquee-item" v-for="item in marqueeList" :key="item">
						<text>{{ item }}</text>	
					</view>
				</template>
				<template v-else>
					<view class="marquee-item" v-for="item in marqueeList" :key="item">
						<image :src="item"></image>
					</view>
				</template>
			</template>
		</view>
	</view>
</template>
<script setup>
	import { ref, defineProps, onMounted, getCurrentInstance, watch } from 'vue'
	const instance = getCurrentInstance();
	
	const props = defineProps({
		// 跑马灯数组 可以是简单对象 也支持复杂对象 复杂对象时 需要传递marqueeKey关键词
		marqueeList: {
			type: Array,
			default: []
		},
		marqueeKey: {
			type: String,
			default: ''
		},
		// 跑马灯类型 支持 文字和图片 默认是文字
		marqueeType: {
			type: String,
			default: 'text'
		}
	})
</script>
<style lang="less" scoped>
	.marquee-container{
		width: 100%;
		text-align: left;
		display: flex;
		white-space: nowrap;
		height: 90rpx;
		.marquee-item{
			width: 90rpx;
			height: 90rpx;
			margin-right: 28rpx;
			display: inline-block;
			flex-shrink: 0;
			image{
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
	}
</style>